﻿@model ProjectHopur23.Models.GameViewModel
@using ProjectHopur23.Models

<link rel="stylesheet" type="text/css" href="/Content/LudoBoard.css" />
<link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/Content/Site.css" />
<link rel="stylesheet" type="text/javascript" href="/Scripts/bootstrap.js" />
<link rel="stylesheet" type="text/javascript" href="/Scripts/jquery-1.8.2.js" />

<h2>Spilum Lúdó</h2>
<div class="ludoMain">
<div class="ludoGameBoard">
    <table id="ludo">
        <tbody id="ludo tbody tr td">
            <tr>
                <td rowspan="2" colspan="2" id="112" class="RedHome"></td>
                <td rowspan="2" colspan="2" id="113" class="RedHome"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td id="50" class="GameRoute"></td>
                <td id="51" class="GameRoute"></td>
                <td id="0" class="GameRoute"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" id="100" class="GreenHome"></td>
                <td rowspan="2" colspan="2" id="101" class="GreenHome"></td>
            </tr>
            <tr>
                <td id="49" class="GameRoute"></td>
                <td id="60" class="GreenEndRoute"></td>
                <td id="1" class="GreenBegin"></td>
                <!--2nd Row ends here--><!--3rd row starts here-->
            <tr>
                <td rowspan="2" colspan="2" id="114" class="RedHome"></td>
                <td rowspan="2" colspan="2" id="115" class="RedHome"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td id="48" class="GameRoute"></td>
                <td id="61" class="GreenEndRoute"></td>
                <td id="2"  class="GameRoute"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" id="102" class="GreenHome"></td>
                <td rowspan="2" colspan="2" id="103" class="GreenHome"></td>
            </tr>
            <tr>
                <td id="47" class="GameRoute"></td>
                <td id="62" class="GreenEndRoute"></td>
                <td id="3"  class="GameRoute"></td>
                <!--3rd Row ends here--><!--4th row starts here-->
            </tr>
            <tr>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td id="46" class="GameRoute"></td>
                <td id="63" class="GreenEndRoute"></td>
                <td id="4"  class="GameRoute"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
            </tr>
            <tr>
                <td id="45" class="GameRoute"></td>
                <td id="64" class="GreenEndRoute"></td>
                <td id="5"  class="GameRoute"></td>
            </tr>
            <!---->
            <tr>
                <td id="39" class="GameRoute"></td>
                <td id="40" class="RedBegin"></td>
                <td id="41" class="GameRoute"></td>
                <td id="42" class="GameRoute"></td>
                <td id="43" class="GameRoute"></td>
                <td id="44" class="GameRoute"></td>
                <td rowspan="3" colspan="3" align="center" id="150" ><strong>ENDIR</strong></td>
                <td id="6" class="GameRoute"></td>
                <td id="7" class="GameRoute"></td>
                <td id="8" class="GameRoute"></td>
                <td id="9" class="GameRoute"></td>
                <td id="10" class="GameRoute"></td>
                <td id="11" class="GameRoute"></td>
            </tr>
            <!---->
            <tr>
                <td id="38" class="GameRoute"></td>
                <td id="90" class="RedEndRoute"></td>
                <td id="91" class="RedEndRoute"></td>
                <td id="92" class="RedEndRoute"></td>
                <td id="93" class="RedEndRoute"></td>
                <td id="94" class="RedEndRoute"></td>
                <td id="74" class="BlueEndRoute"></td>
                <td id="73" class="BlueEndRoute"></td>
                <td id="72" class="BlueEndRoute"></td>
                <td id="71" class="BlueEndRoute"></td>
                <td id="70" class="BlueEndRoute"></td>
                <td id="12" class="GameRoute"></td>
            </tr>
            <!--5th row ends here--><!--6th row starts here-->
            <tr>
                <td id="37" class="GameRoute"></td>
                <td id="36" class="GameRoute"></td>
                <td id="35" class="GameRoute"></td>
                <td id="34" class="GameRoute"></td>
                <td id="33" class="GameRoute"></td>
                <td id="32" class="GameRoute"></td>
                <td id="18" class="GameRoute"></td>
                <td id="17" class="GameRoute"></td>
                <td id="16" class="GameRoute"></td>
                <td id="15" class="GameRoute"></td>
                <td id="14" class="BlueBegin"></td>
                <td id="13" class="GameRoute"></td>
            </tr>
            <!--6th row ends here--><!--7th row-->
            <tr>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td id="31" class="GameRoute"></td>
                <td id="84" class="YellowEndRoute"></td>
                <td id="19" class="GameRoute"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
            </tr>
            <tr>
                <td id="30" class="GameRoute"></td>
                <td id="83" class="YellowEndRoute"></td>
                <td id="20" class="GameRoute"></td>
            </tr>
            <!--7th row ends--><!--8th row-->
            <tr>
                <td rowspan="2" colspan="2" id="110" class="YellowHome"></td>
                <td rowspan="2" colspan="2" id="111" class="YellowHome"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td id="29" class="GameRoute"></td>
                <td id="82" class="YellowEndRoute"></td>
                <td id="21" class="GameRoute"></td>
                <td rowspan="2" colspan="2" class="collapse" ></td>
                <td rowspan="2" colspan="2" id="106" class="BlueHome"></td>
                <td rowspan="2" colspan="2" id="107" class="BlueHome"></td>
            </tr>
            <tr>
                <td id="28" class="GameRoute"></td>
                <td id="81" class="YellowEndRoute"></td>
                <td id="22" class="GameRoute"></td>
            </tr>
            <!--8th row ends--><!--9th row-->
            <tr>
                <td rowspan="2" colspan="2" id="108" class="YellowHome"></td>
                <td rowspan="2" colspan="2" id="109" class="YellowHome"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td id="27" class="YellowBegin"></td>
                <td id="80" class="YellowEndRoute"></td>
                <td id="23" class="GameRoute"></td>
                <td rowspan="2" colspan="2" class="collapse"></td>
                <td rowspan="2" colspan="2" id="104" class="BlueHome"></td>
                <td rowspan="2" colspan="2" id="105" class="BlueHome"></td>
            </tr>
            <tr>
                <td id="26" class="GameRoute"></td>
                <td id="25" class="GameRoute"></td>
                <td id="24" class="GameRoute"></td>
            </tr>
            <!--9th row ends--><!--Row for the Fourth side at the bottom-->
        </tbody>
    </table>
</div>
    </div>

<div id="ludoStatusBoard">
	<h3>Leikmenn</h3>
	@foreach(UserProfile u in Model.listOfPlayers)
	{
		<div class="player">
			<span>Nafn: @u.UserName</span>
			<span>Stig: @u.score</span>
		</div>
	}

<span>Leikma&eth;ur </span><span class="nextPlayer"></span><span> &aacute a&eth gera</span>
<div id="dieroll">
    <input type="image" src="@Url.Content("~/Images/teningur.png")" class="img-circle"/>
	<p id="dieResult"></p>
</div>
</div>

<div id="endpieces">
    <table>
        <caption class="caption">Leikmenn á endareit</caption>
        <tbody>
            <tr class="Endgreen">
                <td>Leikmaður 1</td>
                <td id="200"></td>
                <td id="201"></td>
                <td id="202"></td>
                <td id="203"></td>
            </tr>
            <tr class="Endblue">
                <td>Leikmaður 2</td>
                <td id="204"></td>
                <td id="205"></td>
                <td id="206"></td>
                <td id="207"></td>
            </tr>
            <tr class="Endyellow">
                <td>Leikmaður 3</td>
                <td id="208"></td>
                <td id="209"></td>
                <td id="210"></td>
                <td id="211"></td>
            </tr>
            <tr class="Endred">
                <td>Leikmaður 4</td>
                <td id="212"></td>
                <td id="213"></td>
                <td id="214"></td>
                <td id="215"></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="commentInterface">
	<div id="replyBox">
		<textarea id="commentText" rows="3" cols="20"></textarea>
		<button id="postComment">Senda</button>	
	</div>
	<div id="commentBox">
	@foreach(Comment c in Model.comments)
	{
		<div class="aComment">
			<span>@c.timePosted.ToShortTimeString() @c.author: @c.text</span>
		</div>
	}
	</div>
</div>

<script>
	var activeGameId = '@(Model.theActiveGame.ID)';
	var hub = $.connection.ludoHub;
	var userName = '@(HttpContext.Current.User.Identity.Name)';

	hub.client.updatedPlayerList = function (userName, score)
	{
		$("#listOfPlayers").append('<div class=\"aPlayer\"><span>Nafn: ' + userName + '</span><span>Stig: ' + score + '</span></div>');
	};

	function retrieveState()
	{
		hub.server.getGameStates(activeGameId).done(function (value) 
		{

			var r = parseInt("@Model.theActiveGame.numberOfPlayers");
			r = r * 4;
			for(var i = 0; i < r; i++)
			{
//				$("#" + value[i].cellId).text(value[i].playerId + 1);
				$("#" + value[i].cellId).addClass("pawn" + value[i].playerId);
			}
		});
	}

	function retrieveDieValue()
	{
		hub.server.getDieValue(activeGameId).done(function (value)
		{
			if (value != 0)
			{
				$("#dieResult").text(value);
			}
		});
	}


	hub.client.cellClicked = function(cellId, playerId, newCellId, win, thePlayerName)
	{
		//TODO: Implement
//		$("#" + cellId).text(" ");
//		$("#" + newCellId).text(playerId + 1);
		
		$("#" + cellId).removeClass("pawn" + playerId);
		$("#" + newCellId).addClass("pawn" + playerId);

		if(win)
		{
			victory(thePlayerName);
		}
	};

	function retrieveInitialPlayerId()
	{
	    $(".nextPlayer").text(@Model.theActiveGame.activePlayerId+1);
	}

	hub.client.getNextPlayer = function (playerId)
	{
	    var numberOfPlayers = parseInt("@Model.theActiveGame.numberOfPlayers");
	    var nextPlayer = (playerId % numberOfPlayers) + 1;
	    $(".nextPlayer").text(nextPlayer);
	}

	function victory(player)
	{
		alert(player + " has won!");
	}

	$("#dieroll input").click(function ()
	{
	    // Call the StartTurn function to initiate the turn
	    // StartTurn will only work for the active player
	    hub.server.startTurn(activeGameId, userName);
	});

	hub.client.dieWasRolled = function(dieValue)
	{
		$("#dieResult").text(dieValue);
	}

	$.connection.hub.start().done(function ()
	{
		hub.server.join(activeGameId);
		hub.server.updatePlayerList(userName, activeGameId);
		retrieveState();
		retrieveDieValue();
		retrieveInitialPlayerId();

		$("#ludo tbody tr td").click(function ()
		{
			hub.server.clickCell(activeGameId, userName, this.id);
		});
	});

	// Comment system
	hub.client.postedComment = function (userName, commentText, time)
	{
		$("#commentBox").append('<div class=\"aComment\"><span>' + time + ' ' + userName + ': ' + commentText + '</span></div>');
		$("#commentText").val("");
	};

	$("#postComment").click(function ()
	{
		var commentText = $("#commentText").val();

		hub.server.postComment(userName, commentText, activeGameId);
	});
</script>
